<template>
	<view>
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">首页</block>
		</cu-custom>
		
		
		<view class="flex justify-center align-center margin-lg">
			<image mode="aspectFit" src="/static/img/qq.png" style="width: 200upx;height: 200upx;"></image>
		</view>
		<view class="cu-card case">
			<view class="cu-item shadow">
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<input @input="mobileInput" type="number" placeholder="输入框带标签" name="input"></input>
					<view class="cu-capsule radius">
						<view class='cu-tag bg-blue '>
							+86
						</view>
						<view class="cu-tag line-blue">
							中国大陆
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">验证码</view>
					<input @input="codeInput" placeholder="输入框带个按钮" name="input"></input>
					<button :disabled="!show" @tap="sendCode" class='cu-btn bg-green shadow'>
						<text v-show="!show">({{ count }})</text>
						验证码</button>
				</view>
			</view>
			
			<button style="margin-top: 30upx;margin-bottom: 30upx;width: 95%;background-color: #ff7c00;" type="primary" class="primary" @tap="bindMobile">手机号码登陆</button>
		</view>
		
		<view style="font-size: 30upx;text-align: center;">
			登陆即表示同意<text style="color: #0FAEFF;">《卡修用户协议》</text>
		</view>
		
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				code: "",
				mobile: "",
				show: true,
			    count: '',
			    timer: null,
				userInfo: {}
			}
		},
		computed: {
		},
		onReady() {
			this.userInfo = uni.getStorageSync("userInfo");	
		},
		methods: {
			async sendCode() {
				// 绑定手机号之前要微信授权获取用户信息
				if(this.userInfo && this.userInfo.nickName){
					const TIME_COUNT = 60;
					if (!this.timer) {
						if(this.mobile && this.mobile.length == 11){
							await this.$api.getVerfication({mobile: this.mobile});
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
								} else {
									this.show = true;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}else{
							uni.showToast({
								title: '请输入正确手机号',
								duration: 2000,
								icon: "none"
							});
						}
					}
				}else{
					uni.navigateTo({
						url: '../user/user'
					})
				}
				
				
            },
			mobileInput(e){
				this.mobile = e.detail.value
			},
			codeInput(e){
				this.code = e.detail.value
			},
			bindMobile(){
				
				if(!this.code){
					uni.showToast({
						title: '请输入正确验证码！',
						icon: 'none',
						duration: 4000
					})
				}
				
				this.$api.bindUser({
					mobile: this.mobile,
					code: this.code
				}).then((res)=>{
					if(res && res.data && res.data.status == 200){
						console.log('res---:', res)
						this.userInfo.mobile = this.mobile
						uni.setStorageSync("userInfo", this.userInfo);
						uni.reLaunch({
							url: '../main/main'
						})
					}else{
						uni.showToast({
							title: '验证码错误！',
							duration: 2000,
							icon: "none"
						});
					}
					
				}).catch((err)=>{
					console.log('request fail', err);
				})
			},
		},
		onLoad() {
			console.log()
		}
	}
</script>

<style>

</style>
